<script setup>
  import { ref, onMounted, onUnmounted } from "vue"
  import PcView from "./pc/index.vue"
  import MobileView from "./mobile/index.vue"

  const isMobile = ref(false)

  const throttle = (func, limit) => {
    let inThrottle;
    return function() {
      const args = arguments;
      const thisArg = this;
      if (!inThrottle) {
        func.apply(thisArg, args);
        inThrottle = true;
        setTimeout(() => (inThrottle = false), limit);
      }
    };
  }
  const handleResize = throttle(() => {
    if (document.body.clientWidth > 700) {
      isMobile.value = false
      
    } else {
      isMobile.value = true
    }
  }, 10)

  onMounted(() => {
    handleResize()
    window.addEventListener('resize', handleResize);
  })
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });
</script>

<template>
  <div class="extremity_box">
    <template v-if="!isMobile">
      <div class="pc_content_big_box">
        <PcView />
      </div>
    </template>
    <template v-else>
      <MobileView />
    </template>
  </div>
</template>

<style scoped lang="scss">
.extremity_box {
  width: 100%;
  .pc_content_big_box {
    min-width: 1280px;
  }
}
</style>
